<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>聊天</title>
    <link rel="stylesheet" href="/layim/src/css/modules/layim/layim.css">
    <link rel="stylesheet" href="/layui/css/layui.css">
    <script src="/layui/layui.js"></script>
    <script src="/static/js/jquery.js"></script>
    <script src="/static/js/jquery.cookie.js"></script>
</head>

<body>
    <div class="layui-layer layui-layer-page layui-box layui-layim-chat" id="layui-layer2" type="page" times="2"
        showtime="0" contype="string"
        style="z-index: 19891016; width: 800px; top: 20%; left: 25%; position: fixed; min-width: 500px; min-height: 420px; background-image: url(&quot;http://192.168.33.10:9502/layim/dist/css/modules/layim/skin/5.jpg&quot;);">
        <div class="layui-layer-title" style="cursor: move;">
            <font style="vertical-align: inherit;">
                <font style="vertical-align: inherit;">&#8203;</font>
            </font>
        </div>
        <div id="layui-layim-chat" class="layui-layer-content">
            <ul class="layui-unselect layim-chat-list" style="height: 484px; display: block;margin-top: 80px;">
                <li class="users-list layim-this" data-type='2' data-send-token='0' data-fd='0' layim-event="tabChat">
                    <img src="/static/image/test.jpg">
                    <span>
                        <font style="vertical-align: inherit;">
                            <font style="vertical-align: inherit;">聊天室</font>
                        </font>
                    </span>
                </li>
            </ul>
            <div class="layim-chat-box" style="margin-left: 200px;">
                <div class="layim-chat layim-chat-friend layui-show">
                    <div class="layui-unselect layim-chat-title">
                        <div class="layim-chat-other">
                            <img class="layim-friend100001" src="/static/image/test.jpg">
                            <span class="layim-chat-username" layim-event="">聊天室</span>
                        </div>
                    </div>
                    <div id="message-main" class="layim-chat-main" style="height: 262px;">
                        <ul id="message0"></ul>
                    </div>
                    <div class="layim-chat-footer">
                        <div class="layim-chat-textarea"><textarea></textarea></div>
                        <div class="layim-chat-bottom">
                            <div class="layim-chat-send">
                                <span class="layim-send-btn" layim-event="send">发送</span>
                                <span class="layim-send-set" layim-event="setSend" lay-type="show">
                                    <em class="layui-edge"></em>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <span class="layui-layer-setwin">
            <a class="layui-layer-min" href="javascript:;"><cite></cite></a>
            <a class="layui-layer-ico layui-layer-max" href="javascript:;"></a>
            <a class="layui-layer-ico layui-layer-close layui-layer-close1" href="javascript:;"></a>
        </span>
        <span class="layui-layer-resize"></span>
    </div>
    <div id='remind' style="z-index: 19891016; width: 182px; height: 50px; top: 300px; left: 227.5px;position: relative;"></div>

    <div id="user-list" style="position: relative;top: 145px;left: 1320px;width: 300px;">
        <ul class="layui-layim-list layui-show">
            
        </ul>
    </div>
   
    <div style="position: fixed;top: 640px;left: 1400px;">
        <button type="button" class="layui-btn" id="logout">退出</button>
    </div>

    <script>
        var wsUrl = 'ws://192.168.33.10:9502';
        var tabList = [];
        var websocket = new WebSocket(wsUrl);
        websocket.onopen = function (evt) {
            console.log('建立连接');
        }
        websocket.onmessage = function (evt) {
            var data = JSON.parse(evt.data);

            console.log(data);
            // 未登录
            if(data.status == 0)
            {
                // 清空cookie
                $.removeCookie('token',{ path: '/' });
                $.removeCookie('nickname',{ path: '/' });
                location.href = '/login.html';
            }

            // 1加入群聊 2个人聊天 3加入聊天室 5群发消息
            if(data.type == 1)
            {
                var html = '<li>';
                var cate = '<cite>' + data.nickname + '<i>' + data.time + '</i></cite>';
                html = '<li class="layim-chat-system"><span>' + data.nickname + '加入群聊</span></li>';
                $('.layim-chat-main ul').append(html);
                $('.layim-chat-main').scrollTop($('.layim-chat-main').scrollTop() + 100);
            }

            if(data.type == 2)
            {
                console.log('接受消息');
                var html = '<li><div class="layim-chat-user"><img src="'+data.avatar+'"><cite>'+data.nickname+'<i>'+data.time+'</i></cite></div><div class="layim-chat-text">'+data.message+'</div></li>'
                
                // 增加ul
                // 判断div是否存在
                if($('#message'+data.token).length==0){
                    // 消息通知
                    var send_html = '<div class="layui-layer layui-layer-page layui-box layui-notice layui-layim-min" data-token="'+data.token+'" data-fd="'+data.fd+'" style="margin-bottom: 20px;"><div class="layui-layer-content"><img id="layui-layim-min" src="' + data.avatar + '"style="cursor: move;"><span>收到新消息</span></div></div>';
                    $('#remind').append(send_html);
                    html = '<ul style="display:none;" id="message'+data.token+'">' + html + '</ul>';
                    $('.layim-chat-main').append(html);
                }else{
                    $('#message'+data.token).append(html);
                }
                $('.layim-chat-main').scrollTop($('.layim-chat-main').scrollTop() + 100);
            }

            if(data.type == 3)
            {
                // 用户列表
                var userList = data.online_users;
                tabList = data.online_users;
                var online_users_html = '';
                userList.forEach((item,index,array)=>{
                    var userInfo = JSON.parse(item);
                    if(userInfo.token != $.cookie('token')){
                        online_users_html += '<li layim-event="chat" data-type="friend" data-fd="'+userInfo.fd+'" data-token="'+userInfo.token+'" class="online_list"><img src="'+userInfo.avatar+'"><span>'+userInfo.nickname+'</span><p>代码改变世界</p></li>';
                    }
                })
                $('#user-list ul').html(online_users_html);
            }

            if(data.type == 5)
            {
                var html = '<li><div class="layim-chat-user"><img src="'+data.avatar+'"><cite>'+data.nickname+'<i>'+data.time+'</i></cite></div><div class="layim-chat-text">'+data.message+'</div></li>'
                $('#message0').append(html);
                $('.layim-chat-main').scrollTop($('.layim-chat-main').scrollTop() + 100);
            }
        }
        websocket.onclose = function (evt) {
            console.log('连接关闭');
        }
        $('.layim-chat-send').click(function () {
            push();
        })
        $(".layim-chat-textarea textarea").keyup(function (event) {
            if (event.keyCode == 13) {
                push();
            }
        });

        function push() {
            var type = $('.layim-this').data('type');
            var fd = $('.layim-this').data('fd');
            var send_token = $('.layim-this').data('send-token');
            var message = $('.layim-chat-textarea textarea').val();
            var data = {
                'token': $.cookie('token'),
                'message': message,
                'send_token': send_token,
                'type': type,
            }
            var avatar = $.cookie('avatar');
            var nickname = $.cookie('nickname');
            var html = '<li class="layim-chat-mine">';
            var time = getFormatDate();
            cate = '<cite><i>' + time + '</i>' + nickname + '</cite>';
            html += '<div class="layim-chat-user"><img src="' + avatar + '">' + cate + '</div><div class="layim-chat-text">' + data.message + '</div></li>';
            // 群聊
            if(fd==0){
                $('#message'+fd).append(html);
            }else{
                $('#message'+send_token).append(html);
            }
            $('.layim-chat-main').scrollTop($('.layim-chat-main').scrollTop() + 100);
            websocket.send(JSON.stringify(data));
            $('.layim-chat-textarea textarea').val('');
        }


        // 点击用户列表
        $('.layui-layim-list').on('click','li',function(){
            $('#message-main ul').css('display','none');
            $('.users-list').removeClass('layim-this');
            var fd = $(this).data('fd');
            var nickname = $(this).children('span').text();
            var avatar = $(this).children('img').attr('src');
            var token = $(this).data('token');
        
            if($('#message'+token).length==0){
                // 显示当前聊天框
                var html = '<li class="users-list layim-this" id="user-list'+fd+'" data-fd='+fd+' data-type="1" data-send-token="'+token+'" layim-event="tabChat"><img src="'+avatar+'"><span><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">'+nickname+'</font></font></span><i class="layui-icon" layim-event="closeChat"><font style="vertical-align: inherit;"></font></i></li>';
                $('.layim-chat-list').append(html);
                // 增加聊天框
                html = '<ul style="display:none;" id="message'+token+'"></ul>';
                $('.layim-chat-main').append(html);

            }else{
                $('#user-list'+fd).addClass('layim-this');
            }
            $('#message'+token).css('display','block');
            var other_html = '<img class="layim-friend100001" src="'+avatar+'"><span class="layim-chat-username" layim-event="">'+nickname+'</span>';
            $('.layim-chat-other').html(other_html);

        })

        // 点击tab列表
        $('.layim-chat-list').on('click','li',function(){
            $('.users-list').removeClass('layim-this');
            $(this).addClass('layim-this');
            var nickname = $(this).children('span').text();
            var avatar = $(this).children('img').attr('src');
            var token = $(this).data('send-token');
            $('.layim-chat-other').children('span').text(nickname);
            $('.layim-chat-other').children('img').attr('src',avatar);

            // 切换聊天框
            $('#message-main ul').css('display','none');
            
            var fd = $(this).data('fd');
            // 显示当前聊天框
            $('#message'+token).css('display','block');
            
        })

        // 点击消息通知
        $('#remind').on('click','.layui-notice',function(){
            var token = $(this).data('token');
            var fd = $(this).data('fd');
            $('#message-main ul').css('display','none');
            $('#message'+token).css('display','block');
            $(this).remove();

            $('.users-list').removeClass('layim-this');
            // 判断是否存在tab列表
            if($('#user-list'+fd).length > 0){
                // 选中tab列表
                $('#user-list'+fd).addClass('layim-this');
            }else{
                // 添加tab列表
                tabList.forEach((item,index,array)=>{
                    var userInfo = JSON.parse(item);
                    if(userInfo.fd == fd){
                        var html = '<li class="users-list layim-this" id="user-list'+fd+'" data-fd='+fd+' data-type="1" data-send-token="'+userInfo.token+'" layim-event="tabChat"><img src="'+userInfo.avatar+'"><span><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">'+userInfo.nickname+'</font></font></span><i class="layui-icon" layim-event="closeChat"><font style="vertical-align: inherit;"></font></i></li>';
                        $('.layim-chat-list').append(html);
                    }
                })
            }
            
        })

        // 退出操作
        $('#logout').click(function(){
            var data = {
                'token':$.cookie('token'),
                'act':'logout',
            };
            $.post('/',data,function(res){
                var data = JSON.parse(res);
                if(data.status == 1){
                    $.cookie('token','')
                    $.cookie('avatar','')
                    $.cookie('nickname','')
                }
                window.location.href = '/login.html';
            })
        })

        
        function getFormatDate() {
            var date = new Date();
            var month = date.getMonth() + 1;
            var strDate = date.getDate();
            if (month >= 1 && month <= 9) {
                month = "0" + month;
            }
            if (strDate >= 0 && strDate <= 9) {
                strDate = "0" + strDate;
            }
            var currentDate = date.getFullYear() + "-" + month + "-" + strDate
                    + " " + date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds();
            return currentDate;
        }

    </script>
</body>

</html>